<script setup>
import { useStore } from 'vuex'
import { onMounted, ref } from 'vue'
import router from '../router/router'
import axios from 'axios'
import { ElMessage } from 'element-plus'
const store = useStore()
const username = ref(store.state.userStore.userInfo.username)
const avatarUrl = ref(store.state.userStore.userInfo.avatarUrl)
// const userId = ref(store.state.userStore.userInfo.userId)
const selectedMenuItem = ref('')
const selectMenuItem = (item) => {
  selectedMenuItem.value = item
  if (item === 'journal') {
    queryBlogsOfFollow(true)
  }
  queryAll()
}
const inputText = ref('')
const images = ref([])
const currentImage = ref('') // 当前上传的图片
const upimages = ref([])
const isChatting = ref(true)
const dys = ref([])
const toggleLike = (id) => {
  axios.get('api/dynamiccontroller/like/' + id).then((res) => {
    queryBlogsOfFollow(true)
    queryAll()
  })
}
const toggleChat = () => {
  isChatting.value = !isChatting.value
}
const back = () => {
  router.push('/chatRoom')
}
const handleImageUpload = (event) => {
  const file = event.target.files[0]
  const reader = new FileReader()
  reader.onload = (e) => {
    images.value.push(e.target.result) // 将上传的图片添加到 images 数组中
    currentImage.value = '' // 将当前上传的图片 URL 设置为空字符串
    console.log(images.value)
  }
  reader.readAsDataURL(file)
  if (file) {
    uploadFile(file)
  }
}

const queryAll = () => {
  axios.get('api/dynamiccontroller/queryAll').then(res => {
    dys.value = res.data
  })
}
onMounted(() => {
  queryAll()
})
const publishDynamic = () => {
  const imagePaths = upimages.value.join('@')
  axios.post('api/dynamiccontroller/insert', {
    username: username.value,
    content: inputText.value,
    imagePaths: imagePaths
  }).then(res => {
    ElMessage.success('发布成功')
    images.value = []
    inputText.value = ''
    queryAll()
  })
}

const uploadFile = (file) => {
  const formData = new FormData()
  formData.append('file', file)
  axios
    .post('api/upload/file', formData)
    .then((res) => {
      upimages.value.push(res.data)
    })
    .catch((error) => {
      console.error(error)
    })
}
const ctcontent = ref('')
const fasong = (id) => {
  axios.post('api/commenttroller/insert', {
    username: username.value,
    parentId: 0,
    answerId: id,
    content: ctcontent.value,
    liked: 0,
    dyId: id
  }
  ).then(res => {
    images.value = ref([])
    ElMessage.success('发送成功')
    ctcontent.value = ''
    queryAll()
  })
}

const isReachBottom = ref(false)
const onScroll = (e) => {
  const scrollTop = e.target.scrollTop
  const offsetHeight = e.target.offsetHeight
  const scrollHeight = e.target.scrollHeight
  if (scrollTop === 0) {
    // 到顶部了，查询一次
    queryBlogsOfFollow(true)
  } else if (scrollTop + offsetHeight + 1 > scrollHeight && !isReachBottom.value) {
    isReachBottom.value = true
    // 再次查询下一页数据
    queryBlogsOfFollow()
  } else {
    isReachBottom.value = false
  }
}

const blogs2 = ref([]) // 关注的人的
const params = ref({
  minTime: 0, // 上一次拉取到的时间戳
  offset: 0 // 偏移量
})
const queryBlogsOfFollow = (clear) => {
  if (clear) {
    params.value.offset = 0
    params.value.minTime = new Date().getTime() + 1
  }
  const { minTime, offset: os } = params.value
  axios.get('api/dynamiccontroller/scroll/follow', {
    params: { offset: os, max: minTime || new Date().getTime() + 1 }
  })
    .then((res) => {
      console.log(res.data)
      if (!res.data) {
        return
      }
      const list = res.data.list
      blogs2.value = clear ? list : blogs2.value.concat(list)
      params.value.minTime = res.data.minTime
      params.value.offset = res.data.offset
    })
    .catch(e => console.log(e))
}

const showSetting = (id) => {
  router.push({ path: '/person', query: { username: id } })
}
</script>

<template>
  <div class="container">

    <div class="left-area"></div>
    <span style=" font-size: 24px;" @click="back()"><el-icon>
        <Back />
      </el-icon></span>
    <div class="middle-area">
      <div class="dynamic-space">
        <div class="avatar"> <img :src="'src/' + avatarUrl" class="user-img" ref="img" @click="showSetting()" />
        </div>
        <div class="info">
          <div class="title">{{ username }}的动态空间</div>
          <div class="qianming">我很帅</div>
        </div>
      </div>
      <el-menu class="horizontal-menu" mode="horizontal" @select="handleMenuSelect">
        <el-menu-item index="personal" @click="selectMenuItem('personal')">发布动态</el-menu-item>
        <el-menu-item index="friends" @click="selectMenuItem('friends')">好友动态</el-menu-item>
        <el-menu-item index="journal" @click="selectMenuItem('journal')">我的关注</el-menu-item>
      </el-menu>
      <div class="content-container">
        <div v-show="selectedMenuItem === 'personal'">
          <div class="put">
            <div class="head">
              <div class="avatar2"> <img :src="'src/' + avatarUrl" class="user-img" ref="img" @click="showSetting()" />
              </div>
              <div class="info">
                <div class="title2">{{ username }}</div>
                <div class="qianming">2023-06-07</div>
              </div>

              <div class="header">
                <div class="dynamic-input">
                  <!-- 图片展示区域 -->
                  <div class="outer-container">
                    <div class="image-container">
                      <div class="grid-container">
                        <div v-for="(image, index) in images" :key="index" class="grid-item">
                          <img :src="image" alt="Image" class="grid-image" />
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 输入框 -->
                  <div class="input-container">
                    <textarea v-model="inputText" placeholder="输入文字"></textarea>
                    <input type="file" accept="image/*" @change="handleImageUpload" />
                  </div>
                  <!-- 发布按钮 -->
                  <button @click="publishDynamic">发布</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-show="selectedMenuItem === 'friends'">
          <div class="shuoshsuo" v-for="(item, index) in dys" :key="index">
            <div class="hhead">
              <div class="head">
                <div class="avatar2"> <img :src="'src/' + item.avatarUrl" class="user-img" ref="img"
                    @click="showSetting(item.username)" />
                </div>
                <div class="info">
                  <div class="title2">{{ item.username }}</div>
                  <div class="qianming">{{ item.sendTime }}</div>
                </div>
              </div>
            </div>
            <div class="dynamic-input">
              <div class="showdy">
                <!-- 图片展示区域 -->
                <div class="outer-container">
                  <div class="image-container">
                    <div class="grid-container">
                      <div v-for="(img, imgindex) in item.imagePaths.split('@')" :key="imgindex" class="grid-item">
                        <a :href="img" download>
                          <img class="grid-image" :src="'src/img' + img" alt="" />
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="wenzi">他说:{{ item.content }}</div>
              </div>

              <div class="foot">
                <div class="details">
                  <div class="icons">
                    <span class="dianzan" @click="toggleLike(item.id)">
                      <el-icon class="custom-icon" :class="{ active: item.isLike }">
                        <Pointer />
                      </el-icon>
                      <div>{{ item.likes }}</div>
                    </span>
                    <span @click="toggleChat">
                      <el-icon class="custom-icon" :class="{ active: isChatting }">
                        <ChatDotRound />
                      </el-icon>
                    </span>
                  </div>
                </div>
                <div class="pinglun" v-for="(citem, cindex) in item.commentsList" :key="cindex">评论:
                  <div class="show">
                    <div>{{ citem.username }}说：</div>
                    <div>{{ citem.content }}</div>
                  </div>
                </div>
                <div class="comment"></div>
                <el-icon class="pl">
                  <ChatDotRound />
                </el-icon>
                <input class="shurucomment" type="text" placeholder="输入评论" v-model="ctcontent">
                <div class="button"><button class="button1" @click="fasong(item.id)">发送</button></div>
              </div>
            </div>
          </div>
        </div>
        <div v-show="selectedMenuItem === 'journal'">
          <div class="blog-list" @scroll="onScroll">
            <div class="shuoshsuo" v-for="(citem, index) in blogs2" :key="index">
              <div class="hhead">
                <div class="head">
                  <div class="avatar2"> <img :src="'src/' + citem.avatarUrl" class="user-img" ref="img"
                      @click="showSetting()" />
                  </div>
                  <div class="info">
                    <div class="title2">{{ citem.username }}</div>
                    <div class="qianming">{{ citem.sendTime }}</div>
                  </div>
                </div>

              </div>

              <div class="dynamic-input">
                <div class="showdy">
                  <!-- 图片展示区域 -->
                  <div class="outer-container">
                    <div class="image-container">
                      <div class="grid-container">
                        <div v-for="(img, imgindex) in citem.imagePaths.split('@')" :key="imgindex" class="grid-item">
                          <a :href="img" download>
                            <img class="grid-image" :src="'src/img' + img" alt="" />
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="wenzi">他说:{{ citem.content }}</div>
                </div>

                <div class="foot">
                  <div class="details">
                    <div class="icons">
                      <span class="dianzan" @click="toggleLike(citem.id)">
                        <el-icon class="custom-icon" :class="{ active: citem.isLike }">
                          <Pointer />
                        </el-icon>
                        <div>{{ citem.likes }}</div>
                      </span>
                      <span @click="toggleChat">
                        <el-icon class="custom-icon" :class="{ active: isChatting }">
                          <ChatDotRound />
                        </el-icon>
                      </span>
                    </div>
                  </div>
                  <div class="pinglun" v-for="(citem, cindex) in citem.commentsList" :key="cindex">评论:
                    <div class="show">
                      <div>{{ citem.username }}说：</div>
                      <div>{{ citem.content }}</div>
                    </div>
                  </div>
                  <div class="comment"></div>
                  <el-icon class="pl">
                    <ChatDotRound />
                  </el-icon>
                  <input class="shurucomment" type="text" placeholder="输入评论" v-model="ctcontent">
                  <div class="button"><button class="button1" @click="fasong(citem.id)">发送</button></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="shuoshsuo" v-for="(item, index) in friendlist"> -->

      <!-- 添加更多动态空间的 div -->
    </div>
    <div class="right-area"></div>
  </div>
</template>

<style scoped>
/*达人探店列表*/
.blog-list {
  max-height: 316px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  overflow-y: auto;
}

.show {
  display: flex;
  margin-left: 200px;
}

.pinglun {
  display: flex;
}

.wenzi {
  border-bottom: 1px solid #b4b0b0;
}

.outer-container {
  position: relative;
}

.outer-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-bottom: 2px solid #dbef3f;
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.grid-item {
  border: 2px solid #b4b0b0;
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
}

.grid-image {
  max-width: 80px;
  max-height: 80px;
  width: auto;
  height: auto;
}

.button {
  padding-top: 10px;
  display: flex;
  justify-content: center;
}

.button1 {
  width: 100px;
  background-color: rgb(240, 255, 241);
}

.dynamic-input {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
}

.input-container {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

textarea {
  width: 300px;
  height: 100px;
  margin-bottom: 10px;
}

input[type="file"] {
  margin-bottom: 10px;
}

.icons {
  display: flex;
  justify-content: flex-end;
}

.avatar {
  display: flex;
  height: 80px;
}

.avatar2 {
  display: flex;
  justify-content: left;
  height: 60px;
}

.container {
  display: flex;
  justify-content: center;
}

.left-area,
.right-area {
  flex: 1;
  background-color: white;
}

.middle-area {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  /* 控制垂直间距 */
  background-color: rgb(232, 244, 245);
  padding: 0 20px;
  height: auto;
  /* 左右留白 */
}

.dynamic-space {
  padding-left: 100px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  width: 700px;
  height: 160px;
  background-color: white;
  /* 动态空间样式 */
}

.qianming {
  padding-top: 10px;
  padding-left: 10px;
  background: linear-gradient(to right, rgb(192, 178, 248), rgb(255, 102, 0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 18px;
}

.title {
  padding-left: 5px;
}

.title2 {
  padding-left: 10px;
  margin-top: 8px;
  background: linear-gradient(to right, rgb(178, 248, 215), rgb(255, 102, 0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 24px;
}

.horizontal-menu {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  background-color: rgb(247, 248, 227);
  padding: 0 20px;
}

.shuoshsuo {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.hhead {
  display: flex;
  justify-content: space-between;
}

.guanzhu {
  font-size: 20px;
  justify-content: center;
  align-self: center;
}

.head {
  display: flex;
}

.content-container {
  width: 700px;
  text-align: left;
}

.details {
  text-align: right;
}

.dianzan {
  padding-right: 30px;
}

.custom-icon {
  font-size: 24px;
  color: #000000;
  transition: color 0.3s ease;
}

.custom-icon.active {
  font-size: 24px;
  color: rgb(0, 255, 128);
}

.commment {
  width: 600px;
}

.pl {
  margin-top: 5px;
  font-size: 20px;
  padding-right: 14px;
}

.shurucomment {
  width: 600px;
  padding: 10px;
  border: none;
  outline: none;
  transition: all 0.3s ease-in-out;
  font-size: 16px;
}

.shurucomment:focus {
  transform: scale(1.05);
}
</style>
